import QtQuick 1.0
import QtWebKit 1.0

Rectangle {
    id: helpDialog
    width: mainWindow.qmlWidth
    height: mainWindow.qmlHeight

    Column {
        Flickable {
            id: flickable
            interactive: true
            width: helpDialog.width
            height: helpDialog.height - 50
            contentWidth: width
            contentHeight: Math.max(height,webView.height)
            property alias title: webView.title
            property alias icon: webView.icon
            property alias progress: webView.progress
            property alias url: webView.url
            property alias back: webView.back
            property alias stop: webView.stop
            property alias reload: webView.reload
            property alias forward: webView.forward

            WebView {
                transformOrigin: Item.TopLeft
                id: webView
                width: flickable.width
                preferredWidth: width

                url: "qrc:/index.html"

                onAlert: console.log(message)

                function doZoom(zoom,centerX,centerY)
                {
                    if (centerX) {
                        var sc = zoom*contentsScale;
                        scaleAnim.to = sc;
                        flickVX.from = flickable.contentX
                        flickVX.to = Math.max(0,Math.min(centerX-flickable.width/2,webView.width*sc-flickable.width))
                        finalX.value = flickVX.to
                        flickVY.from = flickable.contentY
                        flickVY.to = Math.max(0,Math.min(centerY-flickable.height/2,webView.height*sc-flickable.height))
                        finalY.value = flickVY.to
                        quickZoom.start()
                    }
                }

                Keys.onLeftPressed: webView.contentsScale -= 0.1
                Keys.onRightPressed: webView.contentsScale += 0.1


                contentsScale: 1
                onWidthChanged : {
                    // Expand (but not above 1:1) if otherwise would be smaller that available width.
                    if (width > webView.width*webView.contentsScale && webView.contentsScale < 1.0)
                        webView.contentsScale = width / webView.width * webView.contentsScale;
                }

                onContentsSizeChanged: {
                    // zoom out
                    contentsScale = Math.min(1,flickable.width / contentsSize.width)
                }

                onDoubleClick: {
                                if (!heuristicZoom(clickX,clickY,2.5)) {
                                    var zf = flickable.width / contentsSize.width
                                    if (zf >= contentsScale)
                                        zf = 2.0*contentsScale // zoom in (else zooming out)
                                    doZoom(zf,clickX*zf,clickY*zf)
                                 }
                               }

                SequentialAnimation {
                    id: quickZoom

                    PropertyAction {
                        target: webView
                        property: "renderingEnabled"
                        value: false
                    }
                    ParallelAnimation {
                        NumberAnimation {
                            id: scaleAnim
                            target: webView
                            property: "contentsScale"
                            // the to property is set before calling
                            easing.type: Easing.Linear
                            duration: 200
                        }
                        NumberAnimation {
                            id: flickVX
                            target: flickable
                            property: "contentX"
                            easing.type: Easing.Linear
                            duration: 200
                            from: 0 // set before calling
                            to: 0 // set before calling
                        }
                        NumberAnimation {
                            id: flickVY
                            target: flickable
                            property: "contentY"
                            easing.type: Easing.Linear
                            duration: 200
                            from: 0 // set before calling
                            to: 0 // set before calling
                        }
                    }
                    // Have to set the contentXY, since the above 2
                    // size changes may have started a correction if
                    // contentsScale < 1.0.
                    PropertyAction {
                        id: finalX
                        target: flickable
                        property: "contentX"
                        value: 0 // set before calling
                    }
                    PropertyAction {
                        id: finalY
                        target: flickable
                        property: "contentY"
                        value: 0 // set before calling
                    }
                    PropertyAction {
                        target: webView
                        property: "renderingEnabled"
                        value: true
                    }
                }
                onZoomTo: doZoom(zoom,centerX,centerY)
            }
        }


        Rectangle {
            height: 50
            clip: true
            width: helpDialog.width
            Text {
                text: "Close"
                font.pointSize: 18
                anchors.centerIn: parent
            }
            MouseArea {
                anchors.fill: parent
                onClicked: {
                    helpDialog.visible = false
                }
            }
        }
    }

    focus: true


}
